
<template><div class="wrapper">
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
   <swiper-slide v-for="item of swiperList" :key="item.id">
     <img class="swiper-img" :src="item.imgUrl" /></swiper-slide>
   <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>


<script>
export default{
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [
        {id: '0001', imgUrl: 'https://imgs.qunarzz.com/sight/p0/201403/04/4de0f8c4acf3be370f734c58b2da5cfc.jpg_710x360_c27f1f54.jpg'},
        {id: '0002', imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/99f44848-c628-450a-a638-5cc0e3ac60e2.jpg_r_390x260x90_5b955d4d.jpg'}
      ]
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .wrapper >>> .swiper-pagination-bullet-active{
    background:#fff!important
  }
  .wrapper{
    overflow :hidden
    width :100%
    height :0
    padding-bottom :31.25%
    background : #25A4BB
  }
  .swiper-img{
    width : 100%

  }
</style>
